<template>
    <div>
        <h3 v-bind:key='index' v-for="(value,index) in [1,2,3]">
            {{ value }}
        </h3>
        <!-- 选项卡 ，v-for 遍历的，点击任意的选项卡，让当前选项卡的按钮高亮-->
        <!-- 
            class='btn_default' v-bind:class='active === index?"active":""'
         -->
        <div class="tabs">
            <button v-bind:class='[{btn_default:true},{active:active === index}]' v-for="(value,index) in tabs" v-bind:key='index' v-on:click='active = index'>
                {{ value }}
            </button>
        </div>
        <div>
            <h2 v-show="active === index" v-for="(value,index) in pans"  v-bind:key='index'>
                {{ value }}
            </h2>
        </div>
        <!-- 写class绑定和style绑定 -->
        <button v-bind:class='[{myClass: true},{class2:true}]'>绑定多个class名</button>
        <h2 v-bind:style="{color: 'red',fontSize: '60px'}">style</h2>
    </div>
</template>
<script>
export default {
    data(){
        return {
            active: 0,//用来激活样式的一个标识
            tabs:["首页",'新闻','产品'],
            pans:['欢迎来到首页','今日新闻','最新产品'],
        }
    }
}
</script>
<style>
.btn_default{
    margin: 0 10px;
    background:  cadetblue;
    border: 0;
    color:aquamarine;
}
.btn_default.active{
    background: blueviolet;
}
</style>